const DialogContent = {
	isJiess: true,
	name: 'DialogContent',
	// 接收传入参数
	setup({ param }) {
		this.add('弹框中的内容');
	}
}

export default function({ Button }) {
	this.add(
		this.render({
			is: 'button',
			onClick: () => {
				this.dialog(show => {
					const children = [
						this.render({
							is: DialogContent,
							// 传入自定参数
							param: {}
						})
					];
					// config为原框架弹框组件配置对象
					const config = {
						title: '基础弹框示例',
						// 通用语法，根据实际，渲染内容
						children: children
					}

					if (env === 'react-antd') {
						// react环境中自带弹框底部按钮
						Object.assign(config, {
							onOk: () => {
								// 响应式控制当前层级弹框关闭
								show.value = false
							}
						})
					} else if (env === 'vue2-element') {
						children.push(
							// 使用插槽渲染底部按钮
							this.render({ slot: 'footer' },
								this.render({
									is: 'JiessBetween',
									right: [
										this.render({
											is: Button,
											type: 'primary',
											onClick: () => {
												// 响应式控制当前层级弹框关闭
												show.value = false
											}
										}, '确定'),
										this.render({
											is: Button,
											onClick: () => {
												// 响应式控制当前层级弹框关闭
												show.value = false
											}
										}, '取消')
									]
								})
							)
						)
					} else if (env === 'vue3-element') {
						Object.assign(config, {
							$slots: {
								// 使用插槽渲染底部按钮
								footer: () => this.render({
									is: 'JiessBetween',
									right: [
										this.render({
											is: Button,
											type: 'primary',
											onClick: () => {
												// 响应式控制当前层级弹框关闭
												show.value = false
											}
										}, '确定'),
										this.render({
											is: Button,
											onClick: () => {
												// 响应式控制当前层级弹框关闭
												show.value = false
											}
										}, '取消')
									]
								})
							}
						})
					}
					// 返回一个配置对象
					return config;
				})
			}
		}, '点击弹框')
	)
}